<template>
  <van-cell-group>
    <van-cell
      v-for="(item, index) in articles"
      :key="index"
      :to="{
        name: 'article',
        params: {
          articleId: item.art_id
        }
      }">
      <template #title class="van-multi-ellipsis--l3">{{item.title}}</template>
      <template #label>
        <div class="img-label" v-if="item.cover.images.length === 3">
          <van-image fit="cover" v-for="(img, index) in item.cover.images" :src="img" :key="index" />
        </div>
        <div class="wrap-label">
          <span>{{item.aut_name}}</span>
          <span>{{item.collect_cout}}评论</span>
          <span>{{item.pubdate | relativeTime}}</span>
        </div>
      </template>
      <template v-if="item.cover.images.length === 1">
        <van-image class="img-one" fit="cover" v-for="(img, index) in item.cover.images" :src="img" :key="index" />
      </template>
    </van-cell>
  </van-cell-group>
</template>

<script>
export default {
  name: 'article-item',
  props: ['articles']
}
</script>

<style scoped>
.van-cell__title {
  font-family: MicrosoftYaHei;
  font-size: 16px;
  letter-spacing: 1px;
  color: #3a3a3a;
  margin-bottom: 15px;
}
.van-cell__label {
  font-family: MicrosoftYaHei;
  font-size: 12px;
  letter-spacing: 1px;
  color: #b4b4b4;
  margin-top: 15px;
}
.van-list .van-cell {
  padding: 12px 12px 15px;
  border-bottom: 1px solid #edeff3;
}
.img-one {
  width: 116px;
  height: 73px;
}
.img-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/deep/ .img-label .van-image img {
    width: 116px;
    height: 73px;
  }
</style>
